$(function (){
    /*首页头部导航*/
    let tab = new Tab('#tab');
    let oldIndex = -1;
    let dialog = null;
    tab.change = function (el, index){
        //导航栏切换
        if(index === 0){
            $('body').attr('class', 'show-1')
        }
        if(index === 2){
            $('body').attr('class', 'show-6')
        }
        if(index === 3){
            $('body').attr('class', 'show-7')
        }
        if(index === 4){
            $('body').attr('class', 'show-8')
            new Select('#tab-5-select', '#tab-5-select-content');

            let list = $('#tab-5-select-2-content > div');
            $('#tab-5-select-2 > .button').on('click', function (){
                $(this).removeClass('plain').siblings().addClass('plain')
                let index = $(this).index() * 1;
                $(list[index]).removeClass('x-none').siblings().addClass('x-none');
            })
        }

        if(oldIndex > -1){
            $('#header').removeClass('header-theme-' + oldIndex)
        }
        $('#header').addClass('header-theme-' + index)
        oldIndex = index;

        if(dialog){
            dialog.removeClass('active')
            dialog = null;
        }
    }
    tab.init = function (el){
        el.find('.tab-item > .tab-dialog > p').on('click', function (){
            let index = this.getAttribute('data-index');
            switch (index){
                case '1':
                    $('body').attr('class', 'show-2')
                    break;
                case '2':
                    $('body').attr('class', 'show-3')
                    break;
                case '3':
                    $('body').attr('class', 'show-4')
                    break;
                case '4':
                    $('body').attr('class', 'show-5')
                    break;
            }
            tab.click(1)
            $(this).addClass('active').siblings().removeClass('active')
            dialog = $(this)
        })
    }


    $('#cmfw').on('click', function (){
        tab.click(1, function (el){
            $(el.find('.tab-dialog > p')[0]).addClass('active').siblings().removeClass('active')
            $('body').attr('class', 'show-2')
        })
        $(window).scrollTop(0)
    })

    $('#zsff').on('click', function (){
        tab.click(1, function (el){
            $(el.find('.tab-dialog > p')[1]).addClass('active').siblings().removeClass('active')
            $('body').attr('class', 'show-3')
        })
        $(window).scrollTop(0)
    })

    $('#jypx').on('click', function (){
        tab.click(1, function (el){
            $(el.find('.tab-dialog > p')[2]).addClass('active').siblings().removeClass('active')
            $('body').attr('class', 'show-4')
        })
        $(window).scrollTop(0)
    })
    $('#qypx').on('click', function (){
        tab.click(1, function (el){
            $(el.find('.tab-dialog > p')[3]).addClass('active').siblings().removeClass('active')
            $('body').attr('class', 'show-5')
        })
        $(window).scrollTop(0)
    })
    $('#hkyl').on('click', function (){
        tab.click(1, function (el){
            $(el.find('.tab-dialog > p')[0]).addClass('active').siblings().removeClass('active')
            $('body').attr('class', 'show-2')
        })
        $(window).scrollTop(0)
    })

    $('#cpgn').on('click', function (){
        tab.click(2)
        $(window).scrollTop(0)
    })

    $('#zsjm').on('click', function (){
        tab.click(3)
        $(window).scrollTop(0)
    })

    $('#gsjj').on('click', function (){
        tab.click(4)
        $(window).scrollTop(0)
    })



    $('.button-yellow').on('click', buttonClick)

    /*第二部分的tab*/
   let tab1 = new Select('#home-2-select', '#home-2-select-content');
    tab1.change(function (el, index, con){
        con.find('.button').off('click');
        con.find('.button').on('click', buttonClick)
    })
    /*第三部分的tab*/
    let tab2 = new Select('#home-3-select', '#home-3-select-content');
    tab2.change(function (el, index, con){
        con.find('.button').off('click');
        con.find('.button').on('click', buttonClick)
    })

    function buttonClick(){
        tab.click(3)
    }

});




class Tab{
    constructor(id) {
        let _this = this;
        this.el = $(id);
        this.oldIndex = -1;
        this.el.find('.tab-item').on('click', function (){
            let el = $(this);
            let index = el.index();
            if(el.find('.tab-dialog').length <= 0){
                el.addClass('active').siblings().removeClass('active');
                if(_this.change){
                    _this.change(el, index)
                }
                if(_this.oldIndex > -1){
                    _this.el.removeClass('tab-theme-' + _this.oldIndex)
                }
                _this.el.addClass('tab-theme-' + index)
                _this.oldIndex = index;
            }
        })

        setTimeout(() => {
            if(_this.init){
                _this.init(this.el)
            }
        }, 200)
    }
    click(n, fn){
        let el = $(this.el.find('.tab-item')[n])
        el.addClass('active').siblings().removeClass('active');
        this.el.removeClass('tab-theme-' + this.oldIndex)
        this.el.addClass('tab-theme-' + n)
        this.oldIndex = n;
        if(this.change){
            this.change(el, n)
        }

        if(fn){
            fn(el)
        }
    }
}


class Select{
    constructor(id, conid) {
        this.el = $(id)
        this.content = $(conid)
        let _this = this;
        this.el.find('.select-item').on('click', function (e){
            let el = $(this)
            let index = el.index();
            $(this).addClass('active').siblings().removeClass('active')
            $(_this.content.children()[index]).removeClass('x-none').siblings().addClass('x-none');
            if(_this.changeFn && typeof _this.changeFn === 'function'){
                _this.changeFn(el, index, $(_this.content.children()[index]))
            }
        })
        setTimeout(() => {
            if(_this.changeFn && typeof _this.changeFn === 'function'){
                _this.changeFn($(this.el.find('.select-item')[0]), 0, $(_this.content.children()[0]))
            }
        }, 200)
    }
    change(fn){
        this.changeFn = fn;
    }
}
